<script lang="ts" setup>


import { Page, useVbenModal } from '@vben/common-ui'


import { useVbenForm, z } from '#/adapter/form'
import {message, Tag} from "ant-design-vue";
import {ref} from "vue";
import {againstNoLoading} from "#/api/goodsPurchase";

const  goods_purchase_sns:any =ref([])

type EmitEvents = {
  close: [];
};
const emit = defineEmits<EmitEvents>();
const [Modal, modalApi] = useVbenModal({

  onCancel() {
    modalApi.close()
  },
  async onConfirm() {
  const {valid} = await baseFormApi.validate();

  if (valid) {
    modalApi.lock()
    // 校验通过，执行提交逻辑
    console.log('通过校验');
    const  values = await baseFormApi.getValues()

    values.ids = goods_purchase_sns.value.map((x:any) => x.goods_purchase_id)
    console.log(values)
    againstNoLoading(values).then((res:any) => {

      if(res.data.code === 0){
        message.error(res.data.msg);
        emit('close')
        modalApi.close()
      }else {
        message.success(res.data.msg);
        emit('close')
        modalApi.close()
      }
      modalApi.unlock()
    })
  }

  },
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return
    const { data } = modalApi.getData<Record<string, any>>()
    goods_purchase_sns.value=data
    console.log(goods_purchase_sns.value)

  },
})

const [BaseForm, baseFormApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  showDefaultActions: false,
  commonConfig: {
    // 在label后显示一个冒号
    colon: true,
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },

  layout: 'horizontal',
  schema: [
    {
      component: '',
      fieldName: '_divider',
      formItemClass: 'col-span-4',
      label:'已选采购单'
    },
    {
      component: 'Input',
      fieldName: 'against_person',
      formItemClass: 'col-span-4',
      label:'反审人',
      rules: z.string().min(1, '请输入反审人')
    },
    {
      component: 'Input',
      fieldName: 'against_reason',
      formItemClass: 'col-span-4',
      label:'反审原因',
      rules: z.string().min(5, '反审原因至少5个字符').max(200, '反审原因不能超过200个字符')
    },
  ],
  wrapperClass: 'grid-cols-1',
})





</script>

<template>
  <Modal title="反审大货采购单" >
    <Page content-class="flex flex-col gap-4" description="" >
      <BaseForm>
        <template #_divider>
          <div style="overflow-y: auto">
            <template  v-for="(item, index) in goods_purchase_sns" :key="index">
              <Tag >
                {{ item.goods_purchase_sn}}
              </Tag>
            </template>
          </div>
        </template>
      </BaseForm>

    </Page>
  </Modal>
</template>

<style scoped>
/* 让 Form.Item 不再有默认 margin-bottom */
.mb-0 {
  margin-bottom: 0 !important;
}
</style>
